<template>
  <div>
    <el-card class="box-card">
      <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
        <el-form-item>
          <el-input v-model="queryData.prizesName" placeholder="奖品名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="queryData.prizesType" placeholder="请选择奖品类型">
              <el-option
                      v-for="item in types"
                      :key="item.prizesType"
                      :label="item.prizesType"
                      :value="item.prizesType" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="queryDataHandle">查询</el-button>
          <el-button size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="interspaceH"></div>
    <!--table-->
    <div>
      <el-card class="box-card">
          <el-table @selection-change="tableRowChange" :data="tableData"
                    :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
          <el-table-column
            prop="name"
            label="活动标题"
            width="200">
          </el-table-column>
          <el-table-column
            prop="prizesName"
            label="奖品名称"
            width="320">
          </el-table-column>
          <el-table-column
            prop="prizesType"
            label="奖品类型">
          </el-table-column>
          <el-table-column
            prop="prizesPoolNum"
            label="奖品数量">
          </el-table-column>
          <el-table-column
            prop="prizesNum"
            label="奖品剩余数量">
          </el-table-column>
        </el-table>
          <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                         @current-change="queryDataHandle($event,pagePagination.pageSize)"
                         :current-page="pagePagination.currentPage"
                         :page-sizes="pagePagination.pageSizes"
                         :page-size="pagePagination.pageSize"
                         layout="total, sizes, prev, pager, next"
                         :total="pagePagination.total">
          </el-pagination>
      </el-card>
      <div>
  </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"
export default {
  name: "fifth",
  components: {
    Pagination
  },
  data() {
    return {
      queryData: {
          prizesName: '',
          prizesType: ''
      },
      tableData:[],
        types: [
            {
                prizesType: '电子兑换券',
                name: '电子兑换券',
            },
            {
                prizesType: '实物',
                name: '实物',
            },
        ],

      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 分页参数
        pageparm: {
            currentPage: 1,
            pageSize: 10,
            total: 10
        },
        pagePagination: {
            currentPage: 1,
            pageSizes: [10, 15, 20, 25],
            pageSize: 10,
            total: 0
        },
    }
  },
    mounted() {
        this.queryDataHandle(1, 10);
    },
  methods:{
      queryDataHandle(page = 1, row = 10) {
          let payload = {
              pageNum: page,
              pageSize: row,
              prizesName: this.queryData.prizesName,
              prizesType: this.queryData.prizesType
          }
          let that = this
          that.$request("/api/prizes/selectPrizes/1_0", payload, "POST").then((data) => {
              that.pagePagination['total'] = data.total
              that.pagePagination['pageSize'] = data.row
              that.tableData = data.rows
              that.tableData.forEach((item, i) => {
                  if (item.prizesType == 1) {
                      item.prizesType = "实物"
                  }else if (item.billType == 2) {
                      item.prizesType = "电子兑换券"
                  }
              })
          })
      },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },
      resetQuery() {
          this.queryData = {}
      },
      tableRowChange(val) {
          if (val.length > 0) {
              this.titleCurrentPanel = true
          } else {
              this.titleCurrentPanel = false
          }
          this.multipleSelection = val;
      },
  }

}
</script>

<style scoped>

</style>
